<template>
  <div class="container">
    <TitleBox></TitleBox>  
    <div class="mine-ziliao banner-mine">
      <div class="header-img">
        <div class="header-img-box flex-box">
          <div>
            <div class="header-index"><img src="../assets/img/tx-a001.jpg"><span><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-wenzheng-xiangji"></use>
              </svg></span></div>
            <p>点击更换头像</p>
          </div>
        </div>
      </div>
      <div class="ziliao-main">
        <div class="input-box">
          <p>我的昵称：</p>
          <input type="text" placeholder="昵称">
        </div>
        <button>保存信息</button>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import TitleBox from '../components/TitleBox.vue'
export default {
  name: 'home',
  data() {
    return {
      lists: ''
    }
  },
  components: {
    TitleBox
  },
  computed: {},
  methods: {},
  mounted() {}
}
</script>
<style lang="scss" scoped>
.banner-mine {
  max-width: 750px;
  margin: 0 auto;
  background-size: 100%;
  .header-img {
    width: 100%;
    padding-bottom: 42%;
    position: relative;
    .header-img-box {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      .header-index {
        width: r(70);
        height: r(70);
        border-radius: 70px;
        border: 2px solid #fff;
        margin-top: r(-16);
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-radius: 70px;
          position: absolute;
        }
        span {
          display: block;
          width: r(19);
          height: r(19);
          border-radius: 100px;
          background: -webkit-linear-gradient(left, #86d1fc, #4ea4f7); /* Safari 5.1 - 6.0 */
          background: linear-gradient(right, #86d1fc, #4ea4f7);
          /* 标准的语法 */
          color: #fff;
          line-height: r(20);
          margin-left: r(4);
          font-size: r(14);
          text-align: center;
          position: absolute;
          right: -1px;
          bottom: -1px;
          z-index: 6;
        }
      }
      p {
        text-align: center;
        width: 100%;
        font-size: r(14);
        line-height: r(26);
        color: #fff;
      }
    }
  }
}
.mine-ziliao {
  max-width: 750px;
  margin: 0 auto;
  .header-img {
    width: 100%;
    height: r(160);
    background: #fff;
    padding-bottom: 0;
    border-bottom: 1px solid #f7f7f7;
    border-bottom-width: r(10);
    .header-img-box {
      .header-index {
        margin-top: 0;
        span {
          background: #fff;
          color: #58b6fa;
          border: 1px solid #58b6fa;
        }
      }
      p {
        font-size: r(14);
        color: #cccccc;
      }
    }
  }
  .ziliao-main {
    width: 100%;
    padding-left: r(15);
    padding-right: r(15);
    box-sizing: border-box;
    .input-box {
      float: left;
      width: 100%;
      height: r(50);
      line-height: r(50);
      font-size: r(16);
      border-bottom: 1px solid #dedede;
      margin-top: r(12);
      p {
        float: left;
        color: #333333;
      }
      input {
        float: left;
        height: r(50);
        line-height: r(50);
        border: none;
        padding: 0;
        outline: none;
        width: r(220);
        margin-left: r(12);
      }
    }
    button {
      width: r(345);
      height: r(50);
      border-radius: 50px;
      background: -webkit-linear-gradient(right, #86d1fc, #4ea4f7);
      background: linear-gradient(left, #86d1fc, #4ea4f7);
      border: none;
      outline: none;
      font-size: r(16);
      margin-top: r(28);
      color: #ffffff;
    }
  }
}
</style>
